<template>
  <div class="video">
    <div class="title-wrapper">
      <span class='tag'>MV</span>
      <span class='title'>{{ mvName }}</span>
      <span class='artist'>{{ mvArtist }}</span>
    </div>
    <video :src="mvUrl" autoplay controls></video>
  </div>
</template>

<script>
import onesongmv from '../mockdatas/oneSongMv';

export default {
  data(){
    return{
      mvName:'',
      mvUrl:'',
      mvArtist:'',
    }
  },
  created(){
    this.getMvInfo()
    this.getMvUrl()
  },
  methods:{
    //获取mv信息
    async getMvInfo(){
      await this.$axios
        .get(`/mv/detail?mvid=${this.$route.params.mvid}`)
        .then(res => {
          this.mvName = res.data.data.name
          this.mvArtist = res.data.data.artistName
        })
        .catch(err => {
          console.log("请求错误");

        })
    },
    //获取mv地址
    async getMvUrl(){
      await this.$axios
        .get('/mv/url?id=' + this.$route.params.mvid)
        .then(res => {
          console.log(res.data.data.url);
          this.mvUrl = res.data.data.url
        })
        .catch(err => {
          console.log("请求错误");
          this.mvUrl = onesongmv.url
        })
        console.log(this.mvUrl);
    }
  }
}
</script>

<style scoped>
@import "@/assets/css/video.css";
</style>